<template>
  <div style="height: 100%;border: 1px solid #DCDFE6 ;padding: 15px;padding-top: 2px;" id="firstPage" v-loading="loading"
    :element-loading-text=loadingText
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">



    <div style="position: relative;height: 100%;">
      <el-button
        style="    z-index: 2;position: absolute;top: 4px;right: 0%; width: 58px;height: 28px;background-color: rgb(24, 144, 255);font-size: 12px;box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.16);">
        <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);color:white;"
          @click="getpath">下载文件</span>
      </el-button>
      <el-button @click="downloadPPtx()"
        style=" z-index: 2; position: absolute;top: 4px;right: 72px; width: 100px;height: 28px;background-color: white;font-size: 12px;box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.16);">
        <span
          style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);color:rgb(24, 144, 255);">下载PPT模版</span>
      </el-button>
      <div class="file-box" >
        <div style="font-size: 12px;margin-top: 1px;">上传文件</div>

        <input type="file" class="file-btn" style="background-color:white;box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.16);"
          @change="handleFileUpload">

      </div>

      <el-tabs v-model="activeName" style="height: 100%;">

        <!-- <template style="width: 100%;text-align: right;background-color: red;"> -->

        <!-- </template> -->
        <el-tab-pane label="封面信息" name="first" style="height: 100%;">

          <div>
            <div class="demo-input-suffix" style="display: flex;align-items: center;">
              封面标题
              <div style="margin-right: 80px;margin-left: 20px;">
                <el-input placeholder="请输入标题"  v-model="titleSelected">
                </el-input>
              </div>

              <div>选择日期 </div>
              <div style="margin-left: 20px;">
                <el-date-picker v-model="dateSelected" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>

              </div>

            </div>
            <div style="margin-top: 26px;display: flex;align-items: center;gap: 20px;">

              <div>封面图片</div>

              <div class="el-upload el-upload--picture-card" @click="openFilePicker" v-show="imageUrl == ''">

                <i class="el-icon-plus"></i>

              </div>
              <img :src="imageUrl" alt="" style="width: 148px;height: 148px;" @click="openFilePicker"
                v-show="imageUrl != ''">
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="[一级预警控制————地下管阀系统]" style="height: 100%;" name="third">
          <!-- <first-level-alert :surveyImage="surveyImage" :information="information" @dangerArrayData="handleSelectedData" @GISArrayData="handleSelectedGIS"></first-level-alert> -->
          <template>
            
          </template>

          <div style="height: 95%;overflow: auto;">
            <!-- 删除点 -->
         
              <!-- <el-collapse-item title="1、GIS图选择" name="1"> -->
              <div style="display: flex;  align-items: center; width: 100%;margin-top: 15px;">
                <div class="before"></div>
                <div class="GIStitle">GIS图选择</div>
                <div>

                </div>

              </div>
              <div style="display: flex;gap: 1%;width: 100%;margin-top: 15px;">


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;" v-show="GIS[0].selectedImage != ''">
                  <div  class="circle">
                    <el-checkbox v-model="firstGISSelected[0]" @input="firstCheckLogic(firstGISSelected[0], 0)">
                      <template>
                        <label style="font-size: 16px;">中压管网分布图</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(GIS[0].allImage, GIS[0].allDescript, 0)">
                        <img :src="GIS[0].selectedImage" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            GIS[0].selectedDescript }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;" v-show="secondGIS[1].selectedImage != ''">
                  <div class="circle">
                    <el-checkbox v-model="firstGISSelected[1]" @input="firstCheckLogic(firstGISSelected[1], 1)">
                      <template>
                        <label style="font-size: 16px;">内部管网建设图</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(GIS[1].allImage, GIS[1].allDescript, 1)">
                        <img :src="GIS[1].selectedImage" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            GIS[1].selectedDescript }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
      
              <div style="display: flex;  align-items: center; width: 100%;margin-top: 15px;">
                <div class="before"></div>
                <div class="GIStitle">实地勘察照片</div>
                <div style="color: rgb(220, 223, 230);font-weight: 900;margin-left: 5px;margin-right: 5px;">
                  (最多选取5条)
                </div>
                <el-select v-model="selectedValueFirst" placeholder="请选择">
                  <el-option v-for="(item, index) in stageSurveyPeripheralMppnList" :key="index"
                    :label="'园区外围中压管网' + (index + 1)" :value="index">
                  </el-option>
                </el-select>
              </div>

              <div style="display: flex;gap: 1%;flex-wrap: wrap;">


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 0)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[0]" @input="firstDangerCheckLogic(firstIsSelected[0], 0)">
                      <template>
                        <label style="font-size: 16px;">现场照片</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][0].allImage, firstDanger[selectedValueFirst][0].allDescript, 2)">
                        <img :src="firstGetImage(selectedValueFirst, 0)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 0) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 1)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[1]" @input="firstDangerCheckLogic(firstIsSelected[1], 1)">
                      <template>
                        <label style="font-size: 16px;">沉降</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][1].allImage, firstDanger[selectedValueFirst][1].allDescript, 3)">
                        <img :src="firstGetImage(selectedValueFirst, 1)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 1) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 2)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[2]" @input="firstDangerCheckLogic(firstIsSelected[2], 2)">
                      <template>
                        <label style="font-size: 16px;">管道暴露</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][2].allImage, firstDanger[selectedValueFirst][2].allDescript, 4)">
                        <img :src="firstGetImage(selectedValueFirst, 2)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 2) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 3)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[3]" @input="firstDangerCheckLogic(firstIsSelected[3], 3)">
                      <template>
                        <label style="font-size: 16px;">施工工地</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][3].allImage, firstDanger[selectedValueFirst][3].allDescript, 5)">
                        <img :src="firstGetImage(selectedValueFirst, 3)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 3) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 4)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[4]" @input="firstDangerCheckLogic(firstIsSelected[4], 4)">
                      <template>
                        <label style="font-size: 16px;">植被</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][4].allImage, firstDanger[selectedValueFirst][4].allDescript, 6)">
                        <img :src="firstGetImage(selectedValueFirst, 4)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 4) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 5)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[5]" @input="firstDangerCheckLogic(firstIsSelected[5], 5)">
                      <template>
                        <label style="font-size: 16px;">重型机械碾压</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][5].allImage, firstDanger[selectedValueFirst][5].allDescript, 7)">
                        <img :src="firstGetImage(selectedValueFirst, 5)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 5) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>





                <!-- <div style="text-align: center;">
                    <el-checkbox v-model="firstIsSelected[6]" label="容易触碰地方" border
                      @input="firstDangerCheckLogic(firstIsSelected[6], 6)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      firstGetDescript(selectedValueFirst, 6) }}</div>

                    <el-image :src="firstGetImage(selectedValueFirst, 6)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="openDilog(firstDanger[selectedValueFirst][6].allImage, firstDanger[selectedValueFirst][6].allDescript, 8)">选择图片</el-button>
                  </div> -->


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 6)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[6]" @input="firstDangerCheckLogic(firstIsSelected[6], 6)">
                      <template>
                        <label style="font-size: 16px;">容易触碰地方</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][6].allImage, firstDanger[selectedValueFirst][6].allDescript, 8)">
                        <img :src="firstGetImage(selectedValueFirst, 6)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 6) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 7)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[7]" @input="firstDangerCheckLogic(firstIsSelected[7], 7)">
                      <template>
                        <label style="font-size: 16px;">化粪池</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][7].allImage, firstDanger[selectedValueFirst][7].allDescript, 9)">
                        <img :src="firstGetImage(selectedValueFirst, 7)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 7) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <!-- <div style="text-align: center;">
                    <el-checkbox v-model="firstIsSelected[8]" label="地铁线" border
                      @input="firstDangerCheckLogic(firstIsSelected[8], 8)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      firstGetDescript(selectedValueFirst, 8) }}</div>

                    <el-image :src="firstGetImage(selectedValueFirst, 8)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="openDilog(firstDanger[selectedValueFirst][8].allImage, firstDanger[selectedValueFirst][8].allDescript, 10)">选择图片</el-button>
                  </div> -->

                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 8)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[8]" @input="firstDangerCheckLogic(firstIsSelected[8], 8)">
                      <template>
                        <label style="font-size: 16px;">地铁线</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][8].allImage, firstDanger[selectedValueFirst][8].allDescript, 10)">
                        <img :src="firstGetImage(selectedValueFirst, 8)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 8) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 9)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[9]" @input="firstDangerCheckLogic(firstIsSelected[9], 9)">
                      <template>
                        <label style="font-size: 16px;">电力电缆交汇处</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][9].allImage, firstDanger[selectedValueFirst][9].allDescript, 11)">
                        <img :src="firstGetImage(selectedValueFirst, 9)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 9) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>



                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="firstGetImage(selectedValueFirst, 10)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="firstIsSelected[10]" @input="firstDangerCheckLogic(firstIsSelected[10], 10)">
                      <template>
                        <label style="font-size: 16px;">雨污管交汇处</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="openDilog(firstDanger[selectedValueFirst][10].allImage, firstDanger[selectedValueFirst][10].allDescript, 12)">
                        <img :src="firstGetImage(selectedValueFirst, 10)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            firstGetDescript(selectedValueFirst, 10) }}
                        </div>

                      </div>

                    </div>
                  </div>
                </div>



              </div>
           

          
          </div>
        </el-tab-pane>
        <el-tab-pane label="[二级预警控制————燃气调压网络]" style="height: 100%" name="fourth">

          <div style="height: 95%;overflow: auto;">

            <div style="display: flex;  align-items: center; width: 100%;margin-top: 15px;">
              <div class="before"></div>
              <div class="GIStitle">GIS图选择</div>
              <div>

              </div>

            </div>
            <div style="display: flex;gap: 1%;">



              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGIS[0].selectedImage!=''">
                <div class="circle">
                  <el-checkbox v-model="secondGISSelected[0]" @input="secondCheckLogic(secondGISSelected[0], 0)">
                    <template>
                      <label style="font-size: 16px;">中压管网分布图</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondGIS[0].allImage, secondGIS[0].allDescript, 0)">
                      <img :src="secondGIS[0].selectedImage" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGIS[0].selectedDescript }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>



              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGIS[1].selectedImage!=''">
                <div class="circle">
                  <el-checkbox v-model="secondGISSelected[1]" @input="secondCheckLogic(secondGISSelected[1], 1)">
                    <template>
                      <label style="font-size: 16px;">内部管网建设图</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondGIS[1].allImage, secondGIS[1].allDescript, 1)">
                      <img :src="secondGIS[1].selectedImage" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGIS[1].selectedDescript }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div style="display: flex;  align-items: center; width: 100%;margin-top: 15px;">
              <div class="before"></div>
              <div class="GIStitle">实地勘察照片</div>
              <div style="color: rgb(220, 223, 230);font-weight: 900;margin-left: 5px;margin-right: 5px;">
                (最多选取5条)
              </div>
              <el-select v-model="selectedValueSecond" placeholder="请选择">
                <el-option v-for="(item, index) in stageSurveyPrfList" :key="index" :label="'调压设施' + (index + 1)"
                  :value="index">
                </el-option>
              </el-select>
            </div>


            <div style="display: flex;gap: 1%;flex-wrap: wrap;">

              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 0)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[0]" @input="secondDangerCheckLogic(secondDangerSelected[0], 0)">
                    <template>
                      <label style="font-size: 16px;">现场照片</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][0].allImage, secondDanger[selectedValueSecond][0].allDescript, 2)">
                      <img :src="secondGetImage(selectedValueSecond, 0)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 0) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 1)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[1]" @input="secondDangerCheckLogic(secondDangerSelected[1], 1)">
                    <template>
                      <label style="font-size: 16px;">立管占压</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][1].allImage, secondDanger[selectedValueSecond][1].allDescript, 3)">
                      <img :src="secondGetImage(selectedValueSecond, 1)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 1) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>


              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 2)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[2]" @input="secondDangerCheckLogic(secondDangerSelected[2], 2)">
                    <template>
                      <label style="font-size: 16px;">立管生锈</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][2].allImage, secondDanger[selectedValueSecond][2].allDescript, 4)">
                      <img :src="secondGetImage(selectedValueSecond, 2)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 2) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>



              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 3)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[3]" @input="secondDangerCheckLogic(secondDangerSelected[3], 3)">
                    <template>
                      <label style="font-size: 16px;">立管防腐脱落</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][3].allImage, secondDanger[selectedValueSecond][3].allDescript, 5)">
                      <img :src="secondGetImage(selectedValueSecond, 3)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 3) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>



              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 4)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[4]" @input="secondDangerCheckLogic(secondDangerSelected[4], 4)">
                    <template>
                      <label style="font-size: 16px;">生锈</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][4].allImage, secondDanger[selectedValueSecond][4].allDescript, 6)">
                      <img :src="secondGetImage(selectedValueSecond, 4)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 4) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 5)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[5]" @input="secondDangerCheckLogic(secondDangerSelected[5], 5)">
                    <template>
                      <label style="font-size: 16px;">泄漏</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][5].allImage, secondDanger[selectedValueSecond][5].allDescript, 7)">
                      <img :src="secondGetImage(selectedValueSecond, 5)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 5) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>


              <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="secondGetImage(selectedValueSecond, 6)!=''">
                <div style="width: 100%;height: 41px;padding: 10px;">
                  <el-checkbox v-model="secondDangerSelected[6]" @input="secondDangerCheckLogic(secondDangerSelected[6], 6)">
                    <template>
                      <label style="font-size: 16px;">软管变形(沉降)</label>
                    </template>
                  </el-checkbox>
                </div>
                <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                <div style="padding: 15px;height: 145px;">
                  <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                    <div style="height: 100%;width: 40%;position: relative;"
                      @click="secondOpenDilog(secondDanger[selectedValueSecond][6].allImage, secondDanger[selectedValueSecond][6].allDescript, 8)">
                      <img :src="secondGetImage(selectedValueSecond, 6)" alt="" style="width: 100%;height: 100%;">
                      <div class="sampleImage">
                        选择图片
                      </div>
                    </div>
                    <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                      <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                        {{
                          secondGetDescript(selectedValueSecond, 6) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>


            </div>


          </div>

        </el-tab-pane>

        <el-tab-pane label="[三级预警控制————有限空间场景]" name="fifth">
     

            <div style="display: flex;  align-items: center; width: 100%;margin-top: 15px;">
              <div class="before"></div>
              <div class="GIStitle">实地勘察照片</div>
              <div style="color: rgb(220, 223, 230);font-weight: 900;margin-left: 5px;margin-right: 5px;">
                (最多选取5条)
              </div>
              <el-select v-model="selectedValueThree" placeholder="请选择">
                <el-option v-for="(item, index) in stageSurveyConfinedSpaceList" :key="index"
                  :label="'有限空间场景' + (index + 1)" :value="index">
                </el-option>
              </el-select>
            </div>


            <div style="height: 435px;overflow: auto;">

              <div style="display: flex;gap: 20px;flex-wrap: wrap;">
                <!-- <div style="text-align: center;">
                    <el-checkbox v-model="threeDangerSelected[0]" label="现场照片" border
                      @input="threeDangerCheckLogic(threeDangerSelected[0], 0)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      threeGetDescript(selectedValueThree, 0) }}</div>

                    <el-image :src="threeGetImage(selectedValueThree, 0)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="threeOpenDilog(threeDanger[selectedValueThree][0].allImage, threeDanger[selectedValueThree][0].allDescript, 2)">选择图片</el-button>
                  </div> -->


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="threeGetImage(selectedValueThree, 0)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="threeDangerSelected[0]"
                      @input="threeDangerCheckLogic(threeDangerSelected[0], 0)">
                      <template>
                        <label style="font-size: 16px;">现场照片</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="threeOpenDilog(threeDanger[selectedValueThree][0].allImage, threeDanger[selectedValueThree][0].allDescript, 2)">
                        <img :src="threeGetImage(selectedValueThree, 0)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            threeGetDescript(selectedValueThree, 0) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <!-- <div style="text-align: center;">
                    <el-checkbox v-model="threeDangerSelected[1]" label="阀门损坏" border
                      @input="threeDangerCheckLogic(threeDangerSelected[1], 1)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      threeGetDescript(selectedValueThree, 1) }}</div>

                    <el-image :src="threeGetImage(selectedValueThree, 1)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="threeOpenDilog(threeDanger[selectedValueThree][1].allImage, threeDanger[selectedValueThree][1].allDescript, 3)">选择图片</el-button>
                  </div> -->

                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="threeGetImage(selectedValueThree, 1)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="threeDangerSelected[1]"
                      @input="threeDangerCheckLogic(threeDangerSelected[1], 1)">
                      <template>
                        <label style="font-size: 16px;">阀门损坏</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="threeOpenDilog(threeDanger[selectedValueThree][1].allImage, threeDanger[selectedValueThree][1].allDescript, 3)">
                        <img :src="threeGetImage(selectedValueThree, 1)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            threeGetDescript(selectedValueThree, 1) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <!-- <div style="text-align: center;">
                    <el-checkbox v-model="threeDangerSelected[2]" label="管道占压" border
                      @input="threeDangerCheckLogic(threeDangerSelected[2], 2)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      threeGetDescript(selectedValueThree, 2) }}</div>

                    <el-image :src="threeGetImage(selectedValueThree, 2)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="threeOpenDilog(threeDanger[selectedValueThree][2].allImage, threeDanger[selectedValueThree][2].allDescript, 4)">选择图片</el-button>
                  </div> -->

                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="threeGetImage(selectedValueThree, 2)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="threeDangerSelected[2]"
                      @input="threeDangerCheckLogic(threeDangerSelected[2], 2)">
                      <template>
                        <label style="font-size: 16px;">管道占压</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="threeOpenDilog(threeDanger[selectedValueThree][2].allImage, threeDanger[selectedValueThree][2].allDescript, 4)">
                        <img :src="threeGetImage(selectedValueThree, 2)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            threeGetDescript(selectedValueThree, 2) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>




                <!-- 

                  <div style="text-align: center;">
                    <el-checkbox v-model="threeDangerSelected[3]" label="管道法兰生锈" border
                      @input="threeDangerCheckLogic(threeDangerSelected[3], 3)"></el-checkbox>
                    <div style="width: 150px;height: 50px;word-wrap: break-word;overflow: auto;">{{
                      threeGetDescript(selectedValueThree, 3) }}</div>

                    <el-image :src="threeGetImage(selectedValueThree, 3)" alt="" style="width: 150px;height:150px;"
                      :preview-src-list="[]"></el-image>
                    <div style="width: 1px;height: 1px;"></div>
                    <el-button type="text"
                      @click="threeOpenDilog(threeDanger[selectedValueThree][3].allImage, threeDanger[selectedValueThree][3].allDescript, 5)">选择图片</el-button>
                  </div> -->


                <div style="width: 19.2%;height: 186px;border: 1px solid #DCDFE6;margin-top: 20px;border-radius: 4px;" v-show="threeGetImage(selectedValueThree, 3)!=''">
                  <div style="width: 100%;height: 41px;padding: 10px;">
                    <el-checkbox v-model="threeDangerSelected[3]"
                      @input="threeDangerCheckLogic(threeDangerSelected[3], 3)">
                      <template>
                        <label style="font-size: 16px;">管道法兰生锈</label>
                      </template>
                    </el-checkbox>
                  </div>
                  <div style="width: 100%;height: 0.5px;background-color: rgb(220, 223, 230);"></div>
                  <div style="padding: 15px;height: 145px;">
                    <div style="width: 100%;height: 100%;border-radius: 5px;border: 1px solid #DCDFE6;display: flex;">
                      <div style="height: 100%;width: 40%;position: relative;"
                        @click="threeOpenDilog(threeDanger[selectedValueThree][3].allImage, threeDanger[selectedValueThree][3].allDescript, 5)">
                        <img :src="threeGetImage(selectedValueThree, 3)" alt="" style="width: 100%;height: 100%;">
                        <div class="sampleImage">
                          选择图片
                        </div>
                      </div>
                      <div style="width: 60%;height: 100%;padding: 10px;font-size: 14px;">
                        <div style="width: 100%;height: 100%;word-wrap: break-word;overflow: auto;">
                          {{
                            threeGetDescript(selectedValueThree, 3) }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>



            </div>

        
        </el-tab-pane>
      </el-tabs>
    </div>



    <el-dialog title="选择图片" :visible.sync="dilogIsShow" width="80%">
      <div style="display: flex; flex-wrap: wrap;gap: 1%;text-align: center;">
        <div
          style="width: 30%;height: 210px;border-radius: 4px 4px 4px 4px;border: 1px solid #DCDFE6;padding: 10px;margin-top: 10px;"
          v-for="(item, index) in imageWait" :key="index">
          <div style="width: 100%;height: 140px;display: flex; ">
            <img :src="item" alt="" style="width: 32%;height: 150px;margin-right: 3%;" onerror="this.src='/error.jpeg';">


            <div
              style="width: 65%;height: 150px;word-wrap: break-word;overflow: auto;border: 1px solid #DCDFE6;text-align: left;">
              {{ descriptWait[index] }}
            </div>
          </div>
          <div class="btn_three" style="float: right;margin-top: 10px;">
            <el-button slot="reference"  style="margin-top: 10px;"
              @click="firstConfirmImage(index)">选择</el-button>
          </div>


        </div>
      </div>
    </el-dialog>

    <el-dialog title="选择图片" :visible.sync="secondDilogIsShow" width="80%">
      <div style="display: flex; flex-wrap: wrap;gap: 1%;text-align: center;">
        <div
          style="width: 30%;height: 210px;border-radius: 4px 4px 4px 4px;border: 1px solid #DCDFE6;padding: 10px;margin-top: 10px;"
          v-for="(item, index) in secondImageWait" :key="index">
          <div style="width: 100%;height: 140px;display: flex; ">
            <img :src="item" alt="" style="width: 32%;height: 150px;margin-right: 3%;" onerror="this.src='/error.jpeg';">


            <div
              style="width: 65%;height: 150px;word-wrap: break-word;overflow: auto;border: 1px solid #DCDFE6;text-align: left;">
              {{ secondDescriptWait[index] }}
            </div>
          </div>
          <div class="btn_three" style="float: right;margin-top: 10px;">
            <el-button slot="reference"  style="margin-top: 10px;"
              @click="secondConfirmImage(index)">选择</el-button>
          </div>


        </div>
      </div>
    </el-dialog>
    <el-dialog title="选择图片" :visible.sync="threeDilogIsShow" width="80%">
      <div style="display: flex; flex-wrap: wrap;gap: 1%;text-align: center;">
        <div
          style="width: 30%;height: 210px;border-radius: 4px 4px 4px 4px;border: 1px solid #DCDFE6;padding: 10px;margin-top: 10px;"
          v-for="(item, index) in threeImageWait" :key="index">
          <div style="width: 100%;height: 140px;display: flex; ">
            <img :src="item" alt="" style="width: 32%;height: 150px;margin-right: 3%;" onerror="this.src='/error.jpeg';">


            <div
              style="width: 65%;height: 150px;word-wrap: break-word;overflow: auto;border: 1px solid #DCDFE6;text-align: left;">
              {{ threeDescriptWait[index] }}
            </div>
          </div>
          <div class="btn_three" style="float: right;margin-top: 10px;">
            <el-button slot="reference"  style="margin-top: 10px;"
              @click="threeConfirmImage(index)">选择</el-button>
          </div>


        </div>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import pptOnePageVue from '../PptPages/pptOnePage.vue'
import firstLevelAlert from '../PptPages/firstLevelAlert.vue';
import secondLevelAlert from '../PptPages/secondLevelAlert.vue';
import thridLevelAlert from '../PptPages/thridLevelAlert.vue';
import pptxMakeAction from "@/PptxMakeMethod.js";

import Dialog from '../OtherOwerUseComponent/Dialog.vue'
import { getProjectFileListsApi, downloadApi } from "@/api/project/file";
import { getSurveyApi } from "@/api/project/survey";
import thridLevelAlertVue from '../PptPages/thridLevelAlert.vue';
import { getSurveyInformation, getImages, getPPTPATH } from '../../api/project/stageApi';
import { getInfo } from "@/api/project/info";
import axios from 'axios';
import { getToken } from "@/utils/auth";
export default {
  mounted() {
    const projectId = this.$route.params && this.$route.params.projectId;
    this.getInfo(projectId);
    //  if(this.projectInfo1!=undefined){

    //  this.distrbute()
    //  }

  },


  // watch: {
  //   projectInfo: {

  //     handler(newData, oldData) {


  //     },


  //   },
  // },
  data() {
    return {
      dataModel:{
        
      },
      //加载框描述
      loadingText:null,
      //加载框
      loading:false,
      token: getToken(),
      file: null,
      dateSelected: '',
      titleSelected: '',
      imageUrl: '',
      //全部图片
      allImageArr: [],
      //项目信息
      projectInfo: {},
      //一级待选择的图片
      imageWait: [],
      //一级待选择的图片
      descriptWait: [],
      //二级待选择的图片
      secondImageWait: [],
      //二级待选择的描述
      secondDescriptWait: [],
      //三级待选择的图片
      threeImageWait: [],
      //三级待选择的描述
      threeDescriptWait: [],
      //一级弹窗框的索引值
      dataTemporary: null,
      //二级弹窗框的索引值
      secondDataTemporary: null,
      //三级弹窗框的索引值
      threeDataTemporary: null,

      //园区外围中压管网
      stageSurveyPeripheralMppnList: [],
      //调压设施
      stageSurveyPrfList: [],
      //有限空间
      stageSurveyConfinedSpaceList: [],
      GIS: [
        {
          title: '中压管网分布图', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'mediumPressurePipelineNetwork'
        },
        {
          title: '内部管网建设图', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'internalPipelineNetwork'
        }
      ],
      secondGIS: [
        {
          title: '中压管网分布图', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'mediumPressurePipelineNetwork'
        },
        {
          title: '内部管网建设图', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'internalPipelineNetwork'
        }
      ],
      //一级隐患数据
      firstDanger: [],
      //二级隐患数据
      secondDanger: [],
      //三级隐患数据
      threeDanger: [],
      //一级单选逻辑
      firstGISSelected: [false, false],
      //一级隐患复选逻辑
      firstIsSelected: [
        false, false, false, false, false, false, false, false, false, false, false
      ],
      //二级地图单选
      secondGISSelected: [false, false],
      //二级隐患复选
      secondDangerSelected: [false, false, false, false, false, false, false],
      //三级隐患复选
      threeDangerSelected: [false, false, false, false],

      //一级选中的表单
      selectedValueFirst: 0,
      //二级选中的表单
      selectedValueSecond: 0,
      //三级选中的表单
      selectedValueThree: 0,
      textValue: '',
      //一级弹窗显示和隐藏
      dilogIsShow: false,
      //二级弹窗显示和隐藏
      secondDilogIsShow: false,
      //三级弹窗显示和隐藏
      threeDilogIsShow: false,
      value: '',
      ///一级预警的ppt内容
      ppxFirstData: {
        first: {
        
        },
        second: {

        },
        thrid: {

        }

      },
      surveyImage: [],
      information: {},
      pptxUseImage: [],
      activeName: "first",
      dowmloadBt: {
        buttonMessage: '正在下载pptx模版文件',
        buttonTitle: '下载pptx模版'
      },
      uploadBt: {
        buttonMessage: '正在上传pptx文件',
        buttonTitle: '上传pptx'
      },
      dowmloadHistory: {
        buttonMessage: '正在下载pptx历史文件',
        buttonTitle: '下载历史pptx'
      },
      domAddress: 'http://192.168.10.233:8076/file/download?path=',
    }
  },
  name: "programStage",
  methods: {
    ///加载框状态改变
    loadingChange(status,text=null){
      this.loading=status
      this.loadingText=text
    },
    ///下载文件数据
    downloadFile(address) {
      axios({
        url: 'http://192.168.10.233:8077/file/download',
        method: 'GET',
        responseType: 'blob', // Set the response type to 'blob' to receive binary data
        params:{
          path:address
        }
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'file.pptx');
        document.body.appendChild(link);
        link.click();
        //加载框改变状态
        this.loadingChange(false);
      });
    },
    ///获取ppt路径
    getpath() {
      //加载框
      this.loadingChange(true,'下载文件中')
      getPPTPATH(this.projectInfo.projectId).then(response => {
        if (response.code == 200) {
          console.log(response.data);
          this.downloadFile(response.data.filePath)
        }
      })
    },
    handleFileUpload(event) {
        //加载框状态
        this.loadingChange(true,'上传中')
      this.file = event.target.files[0];
      this.uploadStream();
    },
    async uploadStream() {
      const formData = new FormData();
      formData.append('file', this.file);
      const jsonData = this.projectInfo.projectId;

      formData.append('projectId', JSON.stringify(jsonData));
      try {
        const response = await axios.post('http://192.168.10.233:8077/stageProgramme/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': this.token
          }
        });
        this.loadingChange(false)
      } catch (error) {
        this.loadingChange(false)
        console.error(error);
      }
    },
    openFilePicker() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = this.handleFileSelected;
      input.click();
    },
    handleFileSelected(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        this.imageUrl = reader.result;
        console.log(this.imageUrl)
      }
      reader.readAsDataURL(file);

    },

    //一级隐患复选限制逻辑
    firstDangerCheckLogic(status, index) {
      let aa = this.firstIsSelected.filter((item) => {
        return item == true
      })
      if (aa.length > 5) {
        this.firstIsSelected[index] = false
        this.$message({
          type: 'warning',
          message: '至多选择5条'
        });
      }

    },
    //二级隐患复选限制逻辑
    secondDangerCheckLogic(status, index) {
      let aa = this.secondDangerSelected.filter((item) => {
        return item == true
      })
      if (aa.length > 5) {
        this.secondDangerSelected[index] = false
        this.$message({
          type: 'warning',
          message: '至多选择5条'
        });
      }

    },
    //三级隐患复选限制逻辑
    threeDangerCheckLogic(status, index) {
      let aa = this.threeDangerSelected.filter((item) => {
        return item == true
      })
      if (aa.length > 5) {
        this.threeDangerSelected[index] = false
        this.$message({
          type: 'warning',
          message: '至多选择5条'
        });
      }

    },


    //一级GIS单选逻辑
    firstCheckLogic(status, index) {
      for (let i = 0; i < this.firstGISSelected.length; i++) {
        this.firstGISSelected[i] = false
        console.log('dsadadsa')
      }

      this.firstGISSelected[index] = true

    },
    //二级GIS单选逻辑
    secondCheckLogic(status, index) {
      for (let i = 0; i < this.secondGISSelected.length; i++) {
        this.secondGISSelected[i] = false

      }

      this.secondGISSelected[index] = true

    },
    ///一级预警选中赋给图片
    firstConfirmImage(index) {
      this.dilogIsShow = false
      if (this.dataTemporary < 2) {
        this.GIS[this.dataTemporary].selectedImage = this.imageWait[index]
        this.GIS[this.dataTemporary].selectedDescript = this.descriptWait[index]
      } else {
        this.firstDanger[this.selectedValueFirst][this.dataTemporary - 2].selectedImage = this.imageWait[index]
        this.firstDanger[this.selectedValueFirst][this.dataTemporary - 2].selectedDescript = this.descriptWait[index]
      }
    },
    //二级预警选中赋给图片
    secondConfirmImage(index) {
      this.secondDilogIsShow = false
      if (this.secondDataTemporary < 2) {
        this.secondGIS[this.secondDataTemporary].selectedImage = this.secondImageWait[index]
        this.secondGIS[this.secondDataTemporary].selectedDescript = this.secondDescriptWait[index]
      } else {
        this.secondDanger[this.selectedValueSecond][this.secondDataTemporary - 2].selectedImage = this.secondImageWait[index]
        this.secondDanger[this.selectedValueSecond][this.secondDataTemporary - 2].selectedDescript = this.secondDescriptWait[index]
      }
    },
    //三级预警选中赋给图片
    threeConfirmImage(index) {
      this.threeDilogIsShow = false
      if (this.threeDataTemporary < 2) {
        this.threeGIS[this.threeDataTemporary].selectedImage = this.threeImageWait[index]
        this.threeGIS[this.threeDataTemporary].selectedDescript = this.threeImageWait[index]
      } else {
        this.threeDanger[this.selectedValueSecond][this.threeDataTemporary - 2].selectedImage = this.threeImageWait[index]
        this.threeDanger[this.selectedValueSecond][this.threeDataTemporary - 2].selectedDescript = this.threeDescriptWait[index]
      }
    },

    //一级获得选中的描述
    firstGetDescript(i, n) {
      if (this.firstDanger.length > i) {
        if (this.firstDanger[i].length > n) {
          return this.firstDanger[i][n].selectedDescript
        }
      }
      return ''
    },
    //二级获得选中的描述
    secondGetDescript(i, n) {
      if (this.secondDanger.length > i) {
        if (this.secondDanger[i].length > n) {
          return this.secondDanger[i][n].selectedDescript
        }
      }
      return ''
    },
    //三级获得选中的描述
    threeGetDescript(i, n) {
      if (this.threeDanger.length > i) {
        if (this.threeDanger[i].length > n) {
          return this.threeDanger[i][n].selectedDescript
        }
      }
      return ''
    },


    //一级获得图片
    firstGetImage(i, n) {
      if (this.firstDanger.length > i) {
        if (this.firstDanger[i].length > n) {
          return this.firstDanger[i][n].selectedImage
        }
      }
      return ''
    },
    //二级获得图片
    secondGetImage(i, n) {
      if (this.secondDanger.length > i) {
        if (this.secondDanger[i].length > n) {
          return this.secondDanger[i][n].selectedImage
        }
      }
      return ''
    },
    //三级获得图片
    threeGetImage(i, n) {
      if (this.threeDanger.length > i) {
        if (this.threeDanger[i].length > n) {
          console.log(this.threeDanger[i][n].selectedImage)
          return this.threeDanger[i][n].selectedImage
        }
      }
      return ''
    },
    //获取项目信息
    getInfo(projectId) {

      getInfo(projectId).then(response => {
        this.projectInfo = response.data


        // this.getData(this.projectInfo.projectId)
        ///获取图片描述信息
        let path = ''
        this.actionData(this.projectInfo)
      })
    },
    ///组件开始的地方
    actionData(newData) {
      ///获取图片描述信息

      getSurveyInformation(newData.projectId).then(response => {

        this.distrubteGIS(response.data.stageSurveyInfo)
        this.stageSurveyPeripheralMppnList = response.data.stageSurveyPeripheralMppnList
        this.firstDangerDescript(response.data.stageSurveyPeripheralMppnList)
        //二级
        this.secondDistrubteGIS(response.data.stageSurveyInfo)
        this.stageSurveyPrfList = response.data.stageSurveyPrfList
        this.secondDangerDescript(response.data.stageSurveyPrfList)
        //三级
        this.stageSurveyConfinedSpaceList = response.data.stageSurveyConfinedSpaceList
        this.threeDangerDescript(response.data.stageSurveyConfinedSpaceList)

      })
      ///获取图片
      getImages(newData.projectId).then(response => {
        this.allImageArr = response.data
        this.distrbuteImage(response.data)
        //二级
        this.secondDistrbuteImage(response.data)

      })
    },
    //一级分配GIS图片
    distrbuteImage(imageData) {
      for (let i = 0; i < imageData.length; i++) {
        if (imageData[i].fileTreePath.includes('基本信息')) {
          for (let n = 0; n < this.GIS.length; n++) {
            if (imageData[i].fileTreePath.includes(this.GIS[n].title)) {
              this.GIS[n].allImage = imageData[i].fileList
              this.GIS[n].selectedImage = imageData[i].fileList[0]
            }
          }
        }


      }

    },
    //二级分配GIS图片
    secondDistrbuteImage(imageData) {
      for (let i = 0; i < imageData.length; i++) {
        if (imageData[i].fileTreePath.includes('基本信息')) {
          for (let n = 0; n < this.secondGIS.length; n++) {
            if (imageData[i].fileTreePath.includes(this.secondGIS[n].title)) {
              this.secondGIS[n].allImage = imageData[i].fileList
              this.secondGIS[n].selectedImage = imageData[i].fileList[0]
            }
          }
        }


      }

    },
    //一级分配GIS图描述的方法
    distrubteGIS(useData) {

      for (let i = 0; i < this.GIS.length; i++) {
        if (this.GIS[i].dictName != '') {
          this.GIS[i].allDescript = useData[this.GIS[i].dictName]
          this.GIS[i].selectedDescript = useData[this.GIS[i].dictName][0]
        }

      }

    },
    //二级分配GIS图描述的方法
    secondDistrubteGIS(useData) {

      for (let i = 0; i < this.secondGIS.length; i++) {
        if (this.secondGIS[i].dictName != '') {
          this.secondGIS[i].allDescript = useData[this.secondGIS[i].dictName]
          this.secondGIS[i].selectedDescript = useData[this.secondGIS[i].dictName][0]
        }

      }

    },

    //一一级分配隐患图片
    firstDistributeImage() {

      for (let i = 0; i < this.firstDanger.length; i++) {
        for (let n = 0; n < this.firstDanger[i].length; n++) {
          for (let x = 0; x < this.allImageArr.length; x++) {

            if (this.allImageArr[x].fileTreePath.includes('外围中压管网/' + this.firstDanger[i][n].id)) {
              if (this.allImageArr[x].fileTreePath.includes(this.firstDanger[i][n].title)) {
                this.firstDanger[i][n].allImage = this.allImageArr[x].fileList
                this.firstDanger[i][n].selectedImage = this.allImageArr[x].fileList[0]
              }


            }
          }
        }
      }
    },
    // 二级分配隐患图片
    secondDistributeImage() {

      for (let i = 0; i < this.secondDanger.length; i++) {
        for (let n = 0; n < this.secondDanger[i].length; n++) {
          for (let x = 0; x < this.allImageArr.length; x++) {

            if (this.allImageArr[x].fileTreePath.includes('调压设施/' + this.secondDanger[i][n].id)) {
              if (this.allImageArr[x].fileTreePath.includes(this.secondDanger[i][n].title)) {
                this.secondDanger[i][n].allImage = this.allImageArr[x].fileList
                this.secondDanger[i][n].selectedImage = this.allImageArr[x].fileList[0]
              }


            }
          }
        }
      }

    },
    //三级分配隐患图片
    threeDistributeImage() {

      for (let i = 0; i < this.threeDanger.length; i++) {
        for (let n = 0; n < this.threeDanger[i].length; n++) {
          for (let x = 0; x < this.allImageArr.length; x++) {

            if (this.allImageArr[x].fileTreePath.includes('有限空间场景/' + this.threeDanger[i][n].id)) {
              if (this.allImageArr[x].fileTreePath.includes(this.threeDanger[i][n].title)) {
                this.threeDanger[i][n].allImage = this.allImageArr[x].fileList
                this.threeDanger[i][n].selectedImage = this.allImageArr[x].fileList[0]
              }


            }
          }
        }
      }

    },

    //一级分配隐患描述
    firstDangerDescript(useData) {


      for (let i = 0; i < this.stageSurveyPeripheralMppnList.length; i++) {
        let firstDangerModel = [
          {
            title: '现场照片', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'noHiddenDangers', IsSelected: false, id: null
          },
          {
            title: '沉降', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'settlement', IsSelected: false, id: null
          },
          {
            title: '管道暴露', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'pipelineExposure', IsSelected: false, id: null
          },
          {
            title: '施工工地', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'constructionSite', IsSelected: false, id: null
          },
          {
            title: '植被', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'vegetation', IsSelected: false, id: null
          },
          {
            title: '重型机械碾压', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'heavyDutyWorkshop', IsSelected: false, id: null
          },
          {
            title: '容易触碰地方', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'easyTouch', IsSelected: false, id: null
          },
          {
            title: '化粪池', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'septicTank', IsSelected: false, id: null
          },
          {
            title: '地铁线', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'subwayLine', IsSelected: false, id: null
          },
          {
            title: '电力电缆交汇处', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'powerCableIntersection', IsSelected: false, id: null
          },
          {
            title: '雨污管交汇处', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'waterPipeIntersection', IsSelected: false, id: null
          },
        ]

        for (let n = 0; n < firstDangerModel.length; n++) {
          if (firstDangerModel[n].dictName != '') {

            firstDangerModel[n].allDescript = this.stageSurveyPeripheralMppnList[i][firstDangerModel[n].dictName]
            firstDangerModel[n].selectedDescript = this.stageSurveyPeripheralMppnList[i][firstDangerModel[n].dictName][0]

            firstDangerModel[n].id = this.stageSurveyPeripheralMppnList[i].id
          }

        }
        this.firstDanger.push(firstDangerModel)
      }

      this.firstDistributeImage()

    },
    //二级分配隐患描述
    secondDangerDescript(useData) {
      for (let i = 0; i < this.stageSurveyPrfList.length; i++) {
        let secondDangerModel = [
          {
            title: '现场照片', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'noHiddenDangers', IsSelected: false, id: null
          },
          {
            title: '立管占压', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'riserPressure', IsSelected: false, id: null
          },
          {
            title: '立管生锈', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'riserRusted', IsSelected: false, id: null
          },
          {
            title: '立管防腐脱落', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'riserAnticorrosiveFallOff', IsSelected: false, id: null
          },
          {
            title: '生锈', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'rust', IsSelected: false, id: null
          },
          {
            title: '泄漏', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'leakage', IsSelected: false, id: null
          },
          {
            title: '软管变形(沉降)', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'hoseDeformation', IsSelected: false, id: null
          },

        ]
        for (let n = 0; n < secondDangerModel.length; n++) {
          if (secondDangerModel[n].dictName != '') {
            secondDangerModel[n].allDescript = this.stageSurveyPrfList[i][secondDangerModel[n].dictName]
            secondDangerModel[n].selectedDescript = this.stageSurveyPrfList[i][secondDangerModel[n].dictName][0]
            secondDangerModel[n].id = this.stageSurveyPrfList[i].id
          }
        }
        this.secondDanger.push(secondDangerModel)
      }
      this.secondDistributeImage()
    },
    //三级分配隐患描述
    threeDangerDescript(useData) {
      for (let i = 0; i < this.stageSurveyConfinedSpaceList.length; i++) {
        let threeDangerModel = [
          {
            title: '现场照片', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'noHiddenDangers', IsSelected: false, id: null
          },
          {
            title: '阀门损坏', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'valveDamage', IsSelected: false, id: null
          },
          {
            title: '管道占压', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'pipelinePressure', IsSelected: false, id: null
          },
          {
            title: '管道法兰生锈', selectedImage: '', selectedDescript: '', allImage: [], allDescript: [], dictName: 'rustOnPipelineFlanges', IsSelected: false, id: null
          },

        ]

        for (let n = 0; n < threeDangerModel.length; n++) {
          if (threeDangerModel[n].dictName != '') {
            threeDangerModel[n].allDescript = this.stageSurveyConfinedSpaceList[i][threeDangerModel[n].dictName]
            threeDangerModel[n].selectedDescript = this.stageSurveyConfinedSpaceList[i][threeDangerModel[n].dictName][0]
            threeDangerModel[n].id = this.stageSurveyConfinedSpaceList[i].id
          }
        }
        this.threeDanger.push(threeDangerModel)

      }
      this.threeDistributeImage()
    },


    ///打开选择图片
    openDilog(imageData, descript, index) {

      this.dataTemporary = index

      this.dilogIsShow = true

      this.imageWait = imageData
      this.descriptWait = descript
    },

    ///二级打开选择图片
    secondOpenDilog(imageData, descript, index) {

      this.secondDataTemporary = index

      this.secondDilogIsShow = true

      this.secondImageWait = imageData
      this.secondDescriptWait = descript
    },
    ///三级打开选择图片
    threeOpenDilog(imageData, descript, index) {
      console.log(this.threeDataTemporary,)
      this.threeDataTemporary = index

      this.threeDilogIsShow = true

      this.threeImageWait = imageData
      this.threeDescriptWait = descript
    },
    ///一级隐患值
    handleSelectedData(newData) {

      this.ppxFirstData.first['danger'] = newData

    },
    ///一级GIS图选择
    handleSelectedGIS(newData) {

      this.ppxFirstData.first['GIS'] = newData

    },
    ///二级隐患值
    handleSelectedDataSecond(newData) {
      this.ppxFirstData.second['danger'] = newData

    },
    ///二级GIS图选择
    handleSelectedGISSecond(newData) {

      this.ppxFirstData.second['GIS'] = newData

    },
    ///三级隐患值
    handleSelectedDataThrid(newData) {
      this.ppxFirstData.thrid['danger'] = newData

    },
    getData(id) {
      getSurveyApi(id).then(response => {
        if (response.code == 200) {
          this.information = response.data
        }
      })
    },
    downloadPPtx() {
    
      //加载框弹出
      this.loadingChange(true,'下载pptx模版中')
     
      let displayData = [
        {
          GIS: '',
          danger: [


          ]
        },
        {
          GIS: '',
          danger: [



          ]
        },
        {
          danger: [


          ]
        }

      ]

      //一级
      this.firstGISSelected.forEach((isSelected, i) => {
        if (isSelected) {
          displayData[0].GIS = this.GIS[i].selectedImage;
        }
      });
      this.firstIsSelected.forEach((isSelected, i) => {
        if (isSelected) {

          let use = { image: '', descript: '' }
          use.image = this.firstDanger[this.selectedValueFirst][i].selectedImage

          use.descript = this.firstDanger[this.selectedValueFirst][i].selectedDescript
          displayData[0].danger.push(use)
        }
      });

      //二级
      this.secondGISSelected.forEach((isSelected, i) => {
        if (isSelected) {
          displayData[1].GIS = this.secondGIS[i].selectedImage;
        }
      });
      this.secondDangerSelected.forEach((isSelected, i) => {
        if (isSelected) {

          let use = { image: '', descript: '' }
          use.image = this.secondDanger[this.selectedValueSecond][i].selectedImage

          use.descript = this.secondDanger[this.selectedValueSecond][i].selectedDescript
          displayData[1].danger.push(use)
        }
      });
      ///三级
      this.threeDangerSelected.forEach((isSelected, i) => {
        if (isSelected) {

          let use = { image: '', descript: '' }
          use.image = this.threeDanger[this.selectedValueThree][i].selectedImage

          use.descript = this.threeDanger[this.selectedValueThree][i].selectedDescript
          displayData[2].danger.push(use)
        }
      });
      //导出pptx
      let firstData = { title: this.titleSelected, dateSelected: this.dateSelected, image: this.imageUrl }

       pptxMakeAction.download(displayData, firstData,this.complete)
      // pptxText.text()
    },
    ///下载ppt回调执行函数
    complete(states){
      this.loadingChange(false)
    },

    getDownloadFile(address) {
      downloadApi(address).then(response => {
      
      })
    }
  },
  components: {
    pptOnePageVue,
    Dialog,
    firstLevelAlert,
    secondLevelAlert,
    thridLevelAlert
  }
}
</script>
<style lang="scss">
#firstPage {
  .GIStitle{
   
    font-size: 18px;
    font-weight: bold;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 250px;
  }

  .el-input--medium {
    width: 250px;
  }

  .sampleImage {
    position: absolute;
    width: 100%;
    height: 20%;
    top: 80%;
    left: 0%;
    background-color: rgb(255, 255, 255, 0.50);
    text-align: center;
    color: rgba(251, 251, 251, 1);
    font-size: 16px;
  }

  .file-box {
    display: inline-block;
    position: relative;
    padding: 3px 5px;
    overflow: hidden;
    color: #1890FF;
    //  background-color: #ccc;
    z-index: 2;
    position: absolute;
    top: 4px;
    right: 187px;
    width: 74px;
    height: 28px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 4px 4px;
    font-size: 16px;
    text-align: center;

  }

  .file-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    outline: none;
    background-color: transparent;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
  }
  .el-tabs__item {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 14px; /* 设置字体大小 */
  /* 其他样式属性 */
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  
}
.circle .el-checkbox__input .is-checked .el-checkbox__inner{
  border-radius: 10px;
}

.circle{
  width: 100%;
  height: 41px;
  padding: 10px;
}
.circle .el-checkbox__inner{
  
  border-radius: 10px;
}
}
</style>